<template>
  <div class="app-container">
    <!--    <h2 style="text-align: center">医院设置列表</h2>-->

    <!--    表单查询-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getHospList()">查询</el-button>
    </el-form>


    <!-- 批量删除工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="removeDataBatch()">批量删除</el-button>
    </div>

      <!--    表格-->
    <el-table
      :data="hospList" stripe style="width: 100%" @selection-change="handleSelectionChange">
<!--      复选框-->
      <el-table-column type="selection" width="55"/>

      <el-table-column type="index" width="50"/>
      <el-table-column prop="hosname" label="医院名称"/>
      <el-table-column prop="hoscode" label="医院编号"/>
      <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
      <el-table-column prop="contactsName" label="联系人姓名"/>
      <el-table-column prop="contactsPhone" label="联系人手机"/>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '可用' : '不可用' }}
        </template>
      </el-table-column>

      <!--      操作-->
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
<!--          编辑-->
          <router-link :to="'/hospSet/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          </router-link>
<!--          删除-->
          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="removeDataById(scope.row.id)"></el-button>
<!--          锁定-->
          <el-button v-if="scope.row.status == 1" type="primary" size="mini"
                     icon="el-icon-delete" @click="lockHosp(scope.row.id,0)">锁定</el-button>
<!--          取消锁定-->
          <el-button v-if="scope.row.status == 0" type="danger" size="mini"
                     icon="el-icon-delete" @click="lockHosp(scope.row.id,1)">取消锁定</el-button>

        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getHospList"
    />


  </div>
</template>


<script>
  import hospSet from '@/api/hosp/hospset'

  export default {
    data() {
      return {
        multipleSelection: [], // 批量选择列表
        current: 1, // 当前页
        limit: 3, // 每页显示的条数
        searchObj: {}, //每条封装对象
        hospList: [], // 医院信息
        total: 0 // 总记录数
      }
    },
    created() {
      // 页面渲染之前调用对象
      this.getHospList()
    },
    methods: {

// 医院的锁定与解锁
      lockHosp(id,status) {
        hospSet.lockHospSet(id,status).then(() => { // 锁定与解锁
          // 提示
          if (status === 1){
            this.$message({
              type: 'success',
              message: '已解锁'
            })
          }else {
            this.$message({
              type: 'warning',
              message: '已锁定'
            })
          }
          // 刷新页面
          this.getHospList(this.current)
        }).catch(error => { // 执行失败
          console.log(error)
        })
      },

// 当表格复选框选项发生变化的时候触发
      handleSelectionChange(selection) {
        this.multipleSelection = selection
      },

// 获取医院列表
      getHospList(page = 1) {
        // 调用导入对象 传入参数
        this.current = page
        hospSet.getList(this.current, this.limit, this.searchObj).then(resp => { // 成功
          // console.log(resp.data.records)
          this.hospList = resp.data.records
          // 总记录数
          this.total = resp.data.total
          console.log('success')
        }).catch(error => {
          console.log('失败error')
          console.log(error) //失败
        })
      },
// 根据id删除
      removeDataById(id) {
        this.$confirm('此操作将永久删除医院信息,是否继续?', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 确定执行删除方法
          // 执行删除方法
          hospSet.deleteHospSet(id)
            .then(resp => {
              // 提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 刷新页面
              this.getHospList(this.current);
            })
        })
      },
// 批量删除
      removeDataBatch(){
        this.$confirm('确定删除嘛?','提示',{
          type: 'warning',
          confirmButtonText: '删除',
          cancelButtonText: '取消'
        }).then(() => { // 确定删除

          // 添加要删除的行
          var idList = [];
          //遍历数组得到每个id值，设置到idList里面
          for(var i=0;i<this.multipleSelection.length;i++) {
            var obj = this.multipleSelection[i]
            var id = obj.id
            idList.push(id)
          }

          hospSet.removeRows(idList).then(() => { // 删除成功
            // 提示
            this.$message({
              type: 'success',
              message: '批量删除成功!'
            })
            // 刷新页面
            this.getHospList(this.current)
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
